<template>
  <view class="page">
    <view class="header">
      <view class="nav-left">
        <uni-icons type="left" size="20" color="#000000"/>
      </view>
      <view class="nav-title">我推荐的用户</view>
      <view class="nav-right">
        <uni-icons type="more-filled" size="20" color="#000000"/>
      </view>
    </view>
    
    <view class="content">
      <view class="recommend-tag">
        直推({{recommendList.length}})
        <view class="tag-line"></view>
      </view>
      
      <view class="recommend-list">
        <view 
          class="recommend-item"
          v-for="(item, index) in recommendList" 
          :key="index"
        >
          <image class="avatar" :src="item.avatar" mode="aspectFill"/>
          <view class="info">
            <view class="name">{{item.name}}</view>
            <view class="status">{{item.status}}</view>
            <view class="time">{{item.time}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        {
          avatar: 'https://ai-public.mastergo.com/ai/img_res/483216e0c0ddca4bcfff494e2fff22d3.jpg',
          name: '健康运动达人',
          status: '已购499元健康卡 获得10健康豆',
          time: '2023-12-20 12:30'
        },
        {
          avatar: 'https://ai-public.mastergo.com/ai/img_res/ce7d6f2da21fb3984a72fe359293fb87.jpg',
          name: '运动小达人',
          status: '已购499元健康卡 获得10健康豆', 
          time: '2023-12-20 11:30'
        },
        {
          avatar: 'https://ai-public.mastergo.com/ai/img_res/1a581ec9d3cba1a2a785d3c2c9a36e14.jpg',
          name: '快乐运动家',
          status: '已购499元健康卡 获得10健康豆',
          time: '2023-12-20 10:30'
        }
      ]
    }
  }
}
</script>

<style>
page {
  height: 100%;
}

.page {
  background: #FFFFFF;
  min-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background: #FFFFFF;
  border-bottom: 1px solid #F5F5F5;
}

.nav-left {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.content {
  padding: 32rpx;
}

.recommend-tag {
  position: relative;
  font-size: 16px;
  color: #4CAF50;
  font-weight: 500;
  margin-bottom: 32rpx;
  display: inline-block;
}

.tag-line {
  position: absolute;
  bottom: -4rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: #4CAF50;
  border-radius: 2px;
}

.recommend-list {
  padding: 0 16rpx;
}

.recommend-item {
  display: flex;
  align-items: flex-start;
  padding: 32rpx 0;
  border-bottom: 1px solid #F5F5F5;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.info {
  flex: 1;
}

.name {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8rpx;
  font-weight: 400;
}

.status {
  font-size: 14px;
  color: #4CAF50;
  margin-bottom: 8rpx;
}

.time {
  font-size: 12px;
  color: #999999;
}
</style>